<template>
	<view class="page">
		<view class="head">
			<view class="head-top">
				<view class="avatar">
					<image src="@/static/image/avatar.png" mode="aspectFill"></image>
				</view>
				<view class="head-right">
					<view class="nickname">
						{{data.userInfo.nickname ? data.userInfo.nickname: '空'}}
					</view>
					<view class="username">
						Family号：{{data.userInfo.username}}
					</view>
				</view>
			</view>
			<view class="bottom">
				<!-- 下 -->
				地址：{{data.userInfo.address}}
			</view>
		</view>
		<!-- {{data.userInfo}} -->
		<view @click="outLogin" class="out-login">退出登录</view>
	</view>
</template>

<script setup>
	import {ref,onMounted,reactive} from 'vue'
	import {getUser} from '@/api/api'
	onMounted(()=>{
		getUserInfo()
	});
	// 定义数据存储
	const data = reactive({
		userInfo: ''
	})
	// 请求接口
	const getUserInfo = async ()=>{
		const USERINFO = uni.getStorageSync("USERINFO")
		data.userInfo = JSON.parse(USERINFO)
		// try{
		// 	let info = await getUser({username: 'yasuo'});
		// 	data.userInfo = info[0]
		// }finally{
		// }
	}
	// outLogin退出登录
	const outLogin = ()=>{
		uni.setStorageSync("TOKEN",'')
		uni.reLaunch({
			url:'/pages/login/login'
		})
	}
</script>

<style lang="scss">
.page {
	background-color: #e2e2e2;
}
.head {
	padding: 20px;
	background-color: #fff;
}
.head-top {
	display: flex;
}
.avatar {
	height: 80px;
	width: 80px;
	background-color: #dbffac;
	overflow: hidden;
	border-radius: 10px;
	image{
		width: 80px;
		height: 80px;
	}
}
.head-right {
	margin-left: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.nickname {
	font-size: 24px;
}
.bottom {
	margin-top: 16px;
}
.out-login {
	position: absolute;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	width: 100%;
	height: 40px;
}
</style>
